<!--
 * @Descripttion: 
 * @Author: liys
 * @LastEditTime: 2021-07-06 13:54:26
 * @Email: 21555@sohu.com
-->
<%@page import="com.mmy.domain.sys.TSysUser"%>
<%@page import="com.mmy.domain.constzone.TConstZone"%>
<%@page import="com.mmy.domain.sys.TSysOrg"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<% TSysUser tSysUser = (TSysUser) session.getAttribute("tSysUser");%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<jsp:include page="/WEB-INF/jsp/includeb.jsp"></jsp:include>
<script src="js/vue/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/vue/eleme.js"></script>
<link rel="stylesheet" type="text/css" href="css/eleme.css"/>
<title>出团</title>
</head>
<style>
	[v-cloak]{
		display: none;
	}
	.el-input{
		width:225px;
	}
	.total{
		width:100px;
	}
	.box{
		border:1px solid #cccccc;
		border-radius: 4px;
		padding-top: 1rem;
		margin-top: 1rem;
		margin-bottom: 1rem;
	}
	.area{
		width: 1000px;
	}
	.switch{
		padding-left: 20px;
	}

</style>
<body>
<div id="off-canvas-container" class="off-canvas-container">
		<jsp:include page="/WEB-INF/jsp/BackHeader.jsp"></jsp:include>
		<main class="at-padding-large-bottom">
		<article>
		<header class="bg-light at-padding-large-top at-padding-large-bottom at-margin-large-bottom"><div class="page-header container"><div class="row"><div class="span-5 col"><h3>出团</h3></div></div></div></header> 
		<section class="container">
		<div class="information">
			<h4 class="info-h4"><i class="fa fa-caret-right" aria-hidden="true"></i>出团计划</h4>
		</div>

	<div id="app" v-cloak>
		<el-form :model="ff" ref="ff" :inline="true" label-width="108px">
			<input type="hidden" id="LineID" value="${base.getLineID()}">
			<input type="hidden" id="ZoneID" value="${base.getZoneID()}">
			<!-- 主表单 -->
			<el-divider></el-divider>
			<el-form-item label="出发日期" prop="date" :rules="{required: true, message:'请选择出团日期',trigger: 'change'}">
				<el-date-picker type="date" placeholder="选择日期" v-model="ff.date" format="yyyy 年 MM 月 dd 日"
				value-format="yyyy-MM-dd"></el-date-picker>
			</el-form-item>
			<el-form-item label="导游" prop="iGuideID" :rules="{required: true, message:'请选择导游',trigger: 'change'}">
				<el-select v-model="ff.iGuideID" filterable placeholder="请选择">
					<el-option v-for="tour in tours" :key="tour.iUserID" :label="tour.cUserName" :value="tour.iUserID"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="导游电话" prop="iGuideTel" :rules="{required: true, message:'请输入导游电话',trigger: 'blur'}"><el-input v-model="ff.iGuideTel"></el-input></el-form-item>
			<el-form-item label="车辆信息" prop="CarID" :rules="{required: true, message:'请选择车辆信息',trigger: 'change'}">
				<el-cascader v-model="ff.CarID" :options="carOptions"></el-cascader>
			</el-form-item>
			<el-form-item label="司机电话" prop="iDriverTel" :rules="{required: true, message:'请输入司机电话',trigger: 'blur'}"><el-input v-model="ff.iDriverTel"></el-input></el-form-item>
			<el-form-item label="景区路程" prop="iKilometer" :rules="{required: true, message:'请输入景区路程',trigger: 'blur'}"><el-input v-model="ff.iKilometer"></el-input></el-form-item>
			<el-form-item label="计划人数" prop="cCustomNum" :rules="{required: true, message:'请输入计划人数',trigger: 'blur'}"><el-input v-model="ff.cCustomNum"></el-input></el-form-item>
			<el-form-item label="总部联系" prop="cCenterDetail" :rules="{required: true, message:'请输入总部联系人及电话',trigger: 'blur'}"><el-input v-model="ff.cCenterDetail"></el-input></el-form-item>
			<el-form-item label="燃油费" prop="fAddOil" :rules="{required: true, message:'请输入燃油费用',trigger: 'blur'}"><el-input v-model="ff.fAddOil"></el-input></el-form-item>
			<el-form-item label="道桥费" prop="fRoadBridge" :rules="{required: true, message:'请输入道桥费用',trigger: 'blur'}"><el-input v-model="ff.fRoadBridge"></el-input></el-form-item>
			<el-form-item label="包车费" prop="fCharterCar" :rules="{required: true, message:'请输入包车费用',trigger: 'blur'}"><el-input v-model="ff.fCharterCar"></el-input></el-form-item>
			<el-form-item label="实际团费" prop="fTotal" :rules="{required: true, message:'请输入实际团费',trigger: 'blur'}"><el-input v-model="ff.fTotal"></el-input></el-form-item>
			<el-form-item label="地接费用" prop="fReceive" :rules="{required: true, message:'请输入地接费用',trigger: 'blur'}"><el-input v-model="ff.fReceive"></el-input></el-form-item>
			<el-form-item label="司陪餐补" prop="fMealAllowance" :rules="{required: true, message:'请输入司陪餐补费用',trigger: 'blur'}"><el-input v-model="ff.fMealAllowance"></el-input></el-form-item>
			<el-form-item label="带出团费" prop="fActualTotal" :rules="{required: true, message:'请输入带出团费',trigger: 'blur'}"><el-input v-model="ff.fActualTotal"></el-input></el-form-item>
			<el-form-item label="现票情况" prop="cTicketSituation" :rules="{required: true, message:'请输入现票情况',trigger: 'blur'}"><el-input type="textarea" v-model="ff.cTicketSituation"></el-input></el-form-item>
			<!--  动态部分  -->
			<el-divider></el-divider>
			<span>地接</span>
			<div v-for="(groud,index) in ff.grouds">
				<el-form-item label="地接名称" :prop="'grouds.' + index + '.GroudName'" :rules="{required: true, message: '请输入名称',trigger: 'blur'}">
					<el-input v-model="groud.GroudName"></el-input>
				</el-form-item>
				<el-form-item label="地接电话" :prop="'grouds.' + index + '.GroudTel'" :rules="{required: true, message: '请输入电话',trigger: 'blur'}">
					<el-input v-model="groud.GroudTel"></el-input>
				</el-form-item>
				<el-button @click.prevent="removeGroud(groud)"type="warning" plain class="delete">删除</el-button>
			</div>
			<el-button @click="addGroud()">新增地接</el-button>

			<el-divider></el-divider>
			<span>景点</span>
			<div v-for="(scenic,index) in ff.scenics">
				<el-form-item label="景点标准" :prop="'scenics.' + index + '.PlanID'" :rules="{required: true, message: '请选择景点标准',trigger: 'change'}">
					<el-cascader v-model="scenic.PlanID" :options="scenicOptions"></el-cascader>
				</el-form-item>
				<el-form-item label="数量" :prop="'scenics.' + index + '.Num'" :rules="{required: true, message: '请输入景点数量',trigger: 'blur'}">
					<el-input v-model="scenic.Num" maxlength="2" oninput = "value=value.replace(/[^\d.]/g,'')"></el-input>
				</el-form-item>
				<el-form-item label="小结">
					<el-input :value="subScenic(scenic)" :disabled="true" class="total" :ref="'scenic'+index"></el-input>
				</el-form-item>
				<el-button @click.prevent="removeScenic(scenic)"type="warning" plain class="delete">删除</el-button>
			</div>
			<el-button @click="addScenic()">新增景点</el-button>
			
			<el-divider></el-divider>
			<span>酒店</span>
			<div v-for="(hotel,index) in ff.hotels">
				<el-form-item label="酒店标准" :prop="'hotels.' + index + '.PlanID'" :rules="{required: true, message: '请选择酒店标准',trigger: 'change'}">
					<el-cascader v-model="hotel.PlanID" :options="hotelOptions"></el-cascader>
				</el-form-item>
				<el-form-item label="数量" :prop="'hotels.' + index + '.Num'" :rules="{required: true, message: '请输入数量',trigger: 'blur'}">
					<el-input v-model="hotel.Num" maxlength="2" oninput = "value=value.replace(/[^\d.]/g,'')"> </el-input>
				</el-form-item>
				<el-form-item label="小结">
					<el-input :value="subHotel(hotel)" :disabled="true" class="total" :ref="'hotel'+index"></el-input>
				</el-form-item>
				<el-button @click.prevent="removeHotel(hotel)"type="warning" plain class="delete">删除</el-button>
			</div>
			<el-button @click="addHotel()">新增酒店</el-button>

			<el-divider></el-divider>
			<span>餐馆</span>
			<div v-for="(rest,index) in ff.rests">
				<el-form-item label="餐馆标准" :prop="'rests.' + index + '.PlanID'" :rules="{required: true, message: '请选择标准',trigger: 'change'}">
					<el-cascader v-model="rest.PlanID" :options="restOptions"></el-cascader>
				</el-form-item>
				<el-form-item label="数量" :prop="'rests.' + index + '.Num'" :rules="{required: true, message: '请输入数量',trigger: 'blur'}">
					<el-input v-model="rest.Num" maxlength="2" oninput = "value=value.replace(/[^\d.]/g,'')"></el-input>
				</el-form-item>
				<el-form-item label="小结">
					<el-input :value="subRest(rest)" :disabled="true" class="total" :ref="'rest'+index"></el-input>
				</el-form-item>
				<el-button @click.prevent="removeRest(rest)"type="warning" plain class="delete">删除</el-button>
			</div>
			<el-button @click="addRest()">新增餐馆</el-button>
			<!--  动态结束  -->
			总计<el-input v-model="sum" :disabled="true" class="total"></el-input>
		</el-form>
		<center>
			<el-button type="primary" @click="submit('ff')">提交</el-button>
		</center>
	</div><!-- container end-->
	</div><!-- app end-->
	</section>
	</article>
	</main>
	<jsp:include page="/WEB-INF/jsp/Footer.jsp"></jsp:include>
</body>
<script>
	const vue = new Vue({
		el:"#app",
		data(){
			return{
				ff:{date:'',LineID:'',ZoneID:'',
					iGuideID:'',iGuideTel:'',CarID:[],iDriverTel:'',iKilometer:'',
					cCustomNum:'',cCenterDetail:'',fAddOil:'',fRoadBridge:'',fCharterCar:'',
					fTotal:'',fReceive:'',fMealAllowance:'',cTicketSituation:'',fActualTotal:'',
					grouds:[{GroudName:'',GroudTel:''}],
					scenics:[{PlanID:[],Num:'',Total:''}],
					hotels:[{PlanID:[],Num:'',Total:''}],
					rests:[{PlanID:[],Num:'',Total:''}]
				},
				tours:[],
				carOptions:[],
				scenicOptions:[],
				hotelOptions:[],
				restOptions:[]
			}
		},
		created(){
			axios.get('getToursByOrg')
				.then(response => (this.tours = response.data))
				.catch(error => console.log(error))
			axios.get('getCars')
				.then(response => (this.carOptions = response.data))
				.catch(error => console.log(error))

			this.ff.LineID = document.getElementById("LineID").value;
			this.ff.ZoneID = document.getElementById("ZoneID").value;
			this.getOptions(this.ff.ZoneID);
		},
		computed:{
			sum(){
				let p = 0;
				this.ff.scenics.forEach(e => {
					p += e.Total;
				});
				this.ff.hotels.forEach(e => {
					p += e.Total;
				});
				this.ff.rests.forEach(e => {
					p += e.Total;
				});
				this.ff.fTotal = p;
				return p;
			},
		},
		methods:{
			submit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						axios.post('grouppost',this.ff)
						.then(response => (console.log(response.data)))
						.catch(error => console.log(error));
						this.$message.success('提交了!');
					} else {
						this.$message.error('请根据提示正确填写!');
						return false;
					}
				});
			},
			addGroud(item){
				this.ff.grouds.push(
					{GroudName:'',GroudTel:'',key:Date.now()}
				);
			},
			removeGroud(item){
				let len = this.ff.grouds.length;
				if(len == 1){
					this.$message.error('至少保留一组数据!');
					return;
				}
				let index = this.ff.grouds.indexOf(item);
				if(index !== -1){
					this.ff.grouds.splice(index,1)
				}
			},
			addScenic(){
				this.ff.scenics.push(
					{PlanID:'',Num:'',Total:0,key:Date.now()}
				)
			},
			removeScenic(item){
				let len = this.ff.scenics.length;
				if (len == 1){
					this.$message.error('至少保留一组数据!');
					return;
				}
				let index = this.ff.scenics.indexOf(item);
				if(index !== -1){
					this.ff.scenics.splice(index,1)
				}
			},
			addHotel(item){
				this.ff.hotels.push(
					{PlanID:'',Num:'',Total:0,key:Date.now()}
				);
			},
			removeHotel(item){
			 	let len = this.ff.hotels.length;
				if(len == 1){
					this.$message.error('至少保留一组数据!');
					return;
				}
				let index = this.ff.hotels.indexOf(item);
				if(index !== -1){
					this.ff.hotels.splice(index,1)
				}
			},
			addRest(item){
				this.ff.rests.push(
					{PlanID:'',Num:'',Total:0,key:Date.now()}
				);
			},
			removeRest(item){
				let len = this.ff.rests.length;
				if(len == 1){
					this.$message.error('至少保留一组数据!');
					return;
				}
				let index = this.ff.rests.indexOf(item);
				if(index !== -1){
					this.ff.rests.splice(index,1)
				}
			},
			subScenic(val){
				let ob = val.PlanID[0];
				let id = val.PlanID[1];
				let num = val.Num;
				let price = 0;
				if(id){
					let p = this.scenicOptions.find(r => r.value + "" === ob + "");
					let q = p.children.find(r => r.value + "" === id + "");
					if(num){
						price = q.price * num;
						val.Total = price;
					}
				}
				return price;
			},
			subHotel(val){
				let ob = val.PlanID[0];
				let id = val.PlanID[1];
				let num = val.Num;
				let price = 0;
				if(id){
					let p = this.hotelOptions.find(r => r.value + "" === ob + "");
					let q = p.children.find(r => r.value + "" === id + "");
					if(num){
						price = q.price * num;
						val.Total = price;
					}
				}
				return price;
			},
			subRest(val){
				let ob = val.PlanID[0];
				let id = val.PlanID[1];
				let num = val.Num;
				let price = 0;
				if(id){
					let p = this.restOptions.find(r => r.value + "" === ob + "");
					let q = p.children.find(r => r.value + "" === id + "");
					if(num){
						price = q.price * num;
						val.Total = price;
					}
				}
				return price;
			},
			test(){
				axios.get('teststr')
					.then(response => (console.log(response.data.EUR)))
					.catch(error => console.log(error))
			},
			getOptions(id){
				axios.get('getScenicsByZone',{params:{iZoneID:id}})
					.then(response => (this.scenicOptions = response.data))
					.catch(error => console.log(error));
				axios.get('getHotelsByZone',{params:{iZoneID:id}})
					.then(response => (this.hotelOptions = response.data))
					.catch(error => console.log(error));
				axios.get('getRestsByZone',{params:{iZoneID:id}})
					.then(response => (this.restOptions = response.data))
					.catch(error => console.log(error));
			}

		}
	});
</script>
</html>

